<template>
  <!--style="width: calc(100% - 100px); height: calc(100% - 55px);"-->
  <!-- 弹出框 -->
  <a-modal
    :title="title"
    :visible="visible"
    width="100%"
    destroyOnClose
    :bodyStyle="bodyStyle"
    style="top: 0px"
    :footer="null"
    @cancel="handleModalCancel"
  >
    <a-tabs defaultActiveKey="1" tabPosition="left" v-model="tabKey">
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="file-text" />
          <span>附加单据</span>
        </span>
        <div class="component_div">
          <template v-if="isComp">
            <template>
              <a-card :bordered="true" :title="nodeTitle">
                <dynamic-link :path="path" :formData="formData"></dynamic-link>
              </a-card>
            </template>
            <!---历史表单信息-->
            <template>
              <a-card :bordered="true" v-for="(item, index) in histListNodes" :key="index" :title="item.NAME_">
                <dynamic-link :path="item.formUrl" :formData="formData"></dynamic-link>
              </a-card>
            </template>
          </template>
          <template v-else>
            <iframe :src="iframeUrl" frameborder="0" width="100%" :height="height" scrolling="auto"></iframe>
          </template>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="user" />
          <span>任务处理</span>
        </span>
        <his-task-module :formData="formData"></his-task-module>
      </a-tab-pane>

      <a-tab-pane key="3">
        <span slot="tab">
          <a-icon type="sliders" />
          <span>流程图</span>
        </span>
        <process-module :formData="formData" v-if="tabKey=='3'"></process-module>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import TaskModule from './form/TaskModule'
import ProcessModule from './form/ProcessModule'
import { getAction } from '@/api/manage'
import DynamicLink from './form/DynamicLink.vue'
import HisTaskModule from './form/HisTaskModule.vue'
import { isURL } from '@/utils/validate'

export default {
  name: 'HisTaskDealModal',
  components: {
    HisTaskModule,
    DynamicLink,
    TaskModule,
    ProcessModule,
  },
  props: ['path', 'formData'],
  computed: {
    isComp: function () {
      console.log('isComp组件名称：', this.path)
      var TOKEN = Vue.ls.get(ACCESS_TOKEN)
      var DOMAIN_URL = window._CONFIG['domianURL']
      var TASKID = this.formData.taskDefKey
      var URL = (this.path || '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
      console.log('isComp组件名称：', URL)
      if (isURL(URL)) {
        this.iframeUrl = URL
        return false
      }
      this.parseHistListNode()
      return true
    },
  },
  data() {
    return {
      loading: false,
      title: '流程',
      visible: false,
      nodeTitle: '办理节点',
      bodyStyle: {
        padding: '0',
        height: window.innerHeight - 60 + 'px',
        'overflow-y': 'auto',
      },
      height: window.innerHeight - 120 + 'px',
      iframeUrl: '',
      histListNodes: [],
      tabKey:'1'
    }
  },
  methods: {
    // 关闭模态框
    handleModalCancel() {
      this.visible = false
    },
    deal(record) {
      this.visible = true
    },
    parseHistListNode() {
      this.histListNodes = []
      if (this.formData.histListNode && this.formData.histListNode.length > 0) {
        this.formData.histListNode.forEach((element) => {
          //去掉与path相同的页面
          if (element.formUrl && element.formUrl !== this.path) {
            this.histListNodes.push(element)
          }
        })
      }
    },
    lenHistListNode() {
      if (this.histListNodes) {
        return this.histListNodes.length
      }
      return 0
    },
  },
}
</script>

<style lang="less" scoped>
.component_div {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: -10px;
}

// 兼容1.6.2版本的antdv全屏
/deep/ .ant-modal {
  top: 0;
  padding: 0;
}
</style>
